<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>全国人口普查条例知识竞答</title>
  <link rel="stylesheet" href="http://censusqiniu.getpv.com/css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

  <style>
    .box {
      width: 100vw;
      height: 100vh;
      overflow-y: scroll;
      background: url(http://censusqiniu.getpv.com/images/index_bg.jpg?v=5.23) center top no-repeat;
      background-size: contain;
      background-color: #55bfe3;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: space-between;
    }

    .box .acts {
      margin-bottom: 20px;
      position: relative;
    }

    .acts .txts {
      padding: 20px 30px;
      background-color: rgba(255, 255, 255, .8);
      font-weight: bold;
      line-height: 1.4rem;
      text-align: justify;
    }

    .acts .rule-btn {
      width: 120px;
      height: 40px;
      display: block;
      position: absolute;
      right: 0;
      top: -60px;
      right: 50px;
    }

    .rule-box {
      width: 223px;
      padding: 20px;
      background-color: #5db8e9;
      border-radius: 20px;
    }

    .modal-box.rule {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
 

  <div class="box">
    <div></div>
    <div class="acts">
      <a href="javascript:;" class="rule-btn animate__animated animate__bounce" id="rule-a"><img
          src="http://censusqiniu.getpv.com/images/guiz_btn.png?v=1.01" alt="" srcset=""></a>
      <div class="txts animate__animated animate__backInRight">
        2020年，我国将开展第七次全国人口普查，恰逢《全国人口普查条例》颁布十周年。《全国人口普查条例》对普查目的、普查任务、普查对象、普查范围、普查的组织实施、普查资料的管理和公布、法律责任等作出规定。为依法开展第七次全国人口普查营造良好社会氛围，国务院第七次全国人口普查领导小组办公室决定举办《全国人口普查条例》有关知识竞赛活动。
      </div>
    </div>
  </div>

  <!-- 规则弹框 -->
  <div class="modal-box rule" style="display: none;" id="rule-con">
    <div class="rule-box">
      <img src="http://censusqiniu.getpv.com/images/rule-content.jpg?v=5.22.2" alt="" srcset="">
    </div>
  </div>

  <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function () {
      // 弹出规则
      $('#rule-a').click(function () {
        $('#rule-con').show()
        $('#rule-con').click(function () {
          location.href = './timu.html?v=1.01'
        })
      })
    })
  </script>


  <!-- 背景音乐 -->
  <!--  android autoplay属性的设置就会自动播放该音乐  -->
  <audio id="bg-music" preload loop="loop" autoplay src='http://censusqiniu.getpv.com/music/bg.mp3'></audio>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script>

    window.onload = function () {
      document.getElementById("bg-music").play();
    }

    function autoPlayVideo() {
      wx.config({
        debug: false,
        appId: "",
        timestamp: 1,
        nonceStr: "",
        signature: "",
        jsApiList: []
      });
      wx.ready(function () {
        var autoplayVideo = document.getElementById("bg-music");
        autoplayVideo.play()
      })
    };


    autoPlayVideo(); 
  </script>


<script>
$.ajax({
  url: 'http://census.getpv.com/api/wechat/shareSign',
  type: 'POST',
  async: true,
  data: {url: location.href.split('#')[0]},
  dataType: 'json',
  cache: false,
  success: function (data) {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: data['appid'], // 必填，公众号的唯一标识
      timestamp: data['timestamp'], // 必填，生成签名的时间戳
      nonceStr: data['noncestr'], // 必填，生成签名的随机串
      signature: data['signature'],// 必填，签名
      jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表
    });


    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用

      wx.checkJsApi({
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function (res) {
          // 以键值对的形式返回，可用的api值true，不可用为false
          // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
          // alert(JSON.stringify(res));
        }
      });

  
 


      //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
      // wx.updateAppMessageShareData({ 
      //   title:  data.title, // 分享标题
      //   desc:  data.desc, // 分享描述
      //   link:  data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      //   imgUrl:  data.imgUrl, // 分享图标
      //   success: function () {
      //     // 设置成功
      //   }
      // })

      let shareData={
          title:data.title,
          desc:data.desc,
          link:data.link,
          imgUrl:data.imgUrl,
      }

      wx.updateAppMessageShareData(shareData, function (res) {
//这里是回调函数
      });

      wx.updateTimelineShareData(shareData, function (res) {
//这里是回调函数
      });

      wx.onMenuShareAppMessage(shareData, function (res) {
//这里是回调函数
      });

      wx.onMenuShareTimeline(shareData, function (res) {
//这里是回调函数
      });
      wx.onMenuShareQQ(shareData, function (res) {
//这里是回调函数
      });
      wx.onMenuShareWeibo(shareData, function (res) {
//这里是回调函数
      });
      wx.onMenuShareQZone(shareData, function (res) {
//这里是回调函数
      });
 



    });

  }
});


</script>
</body>

</html>